<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<!-- 设定页面使用的字符集 -->
<meta http-equiv="content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />

<title>Spring boot + thymeleaf</title>
</head>
<body>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">访问demo</h3>
		</div>
		<div class="panel-body">
			<span th:text="${singlePerson.name}"></span>
		</div>
	</div>

	<div th:if="${not #lists.isEmpty(people)}">
		<!-- 	<div th:if="${not  #lists.empty(people)}"> -->
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">列表</h3>
			</div>
			<div class="panel-body">
				<ul class="list-group">
					<li class="list-group-item" th:each="person:${people}"><span
						th:text="${person.name}"></span> <span th:text="${person.age}"></span>
						<button class="btn"
							th:onclick="'getName(\'' + ${person.name} + '\');'"></button></li>
				</ul>
			</div>
		</div>
	</div>

	<script type="text/javascript" th:src="@{jquery-2.1.4.min.js}"></script>
	<script type="text/javascript"
		th:src="@{bootstrap/js/bootstrap.js}"></script>

	<script th:inline="javascript">
  var single = [[${singlePerson}]];
  console.log(single.name + "/" + single.age);
  function getName(name){
	  console.log(name);
  }
</script>
</body>
</html>